<script setup>
import topNav from "../../components/topNav.vue";
import {
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import {
  salePriceQuery,
  salePriceCreate,
  saleShopPriceQuery,
} from "@/services/goods";

const showSelect = ref("");
if (uni.getStorageSync("selectShopType")) {
  showSelect.value = uni.getStorageSync("selectShopType");
}

// import tabbarView from "../components/tabbar.vue";
const scrollTop = ref(0);
const saveFun = () => {
  // console.log("取消");
  // form.value.name = "";
  // loading.value = "";
  // getAppProductQuery(1);
};
const searchFun = (val) => {
  console.log("取2消");
  form.value.productName = val;
  loading.value = "";
  console.log(form.value.name);
  getAppProductQuery(1);
};

onReachBottom(() => {
  console.log("触底了");
  getAppProductQuery();
});
onMounted(() => {
  getAppProductQuery();
});

//获取商品
const form = ref({
  categoryId: "",
  pageIndex: 1,
  pageSize: 20,
  barCode: "",
  code: "",
  productName: "",
  skuCode: "",
  categoryId: "",
  available: "",
});

const productData = ref([]);

const loading = ref("");
const getAppProductQuery = async (index) => {
  if (index == 1) {
    productData.value = [];
  }
  if (index) {
    form.value.pageIndex = index;
  }
  if (loading.value == "noMore") {
    return;
  }
  loading.value = "Loading";
  let res = null;
  try {
    if (showSelect.value == "shop") {
      res = await saleShopPriceQuery(form.value);
      if (res.code == 200) {
        productData.value = productData.value.concat(res.data.datas);
        console.log(productData.value);
        form.value.pageIndex = form.value.pageIndex + 1;

        if (res.data.datas.length < form.value.pageSize) {
          loading.value = "noMore";
        } else {
          loading.value = "More";
        }
      } else {
      }
    } else {
      res = await salePriceQuery(form.value);
      if (res.code == 200) {
        productData.value = productData.value.concat(res.data.datas);
        console.log(productData.value);
        form.value.pageIndex = form.value.pageIndex + 1;

        if (res.data.datas.length < form.value.pageSize) {
          loading.value = "noMore";
        } else {
          loading.value = "More";
        }
      } else {
      }
    }

    console.log(res);
  } catch (e) {}
};

//改价模块
const itemObj = ref({});
const selectitem = ref(0);
const num = ref(0);
const show = ref(false);
const showKeyboard = ref(true);
const priceValue = ref("30.10");
const keyboard = ref(null);
const keyboardHeight = ref(0);
const isSr = ref(false);
const themeVars = ref({
  numberKeyboardBackground: "#F7F8FA ",
  numberKeyboardKeyBackground: "#FFFFFF",
  numberKeyboardButtonBackground: "#FF5722",
});

const onClickItem = (item, index) => {
  itemObj.value = item;
  selectitem.value = index;
  priceValue.value = item.salePrice;
  show.value = true;
  showKeyboard.value = true;
  nextTick(() => {
    setTimeout(() => {
      keyboardHeight.value = keyboard.value.$el.offsetHeight;
      console.log(keyboard.value.$el.offsetHeight, keyboard.value);
    }, 100);
  });
};
const onInput = (item) => {
  setTimeout(() => {
    priceValue.value = handlePriceInput(priceValue.value);
  }, 100);

  console.log(item);
};
//提交改价

const onBlue = async () => {
  try {
    let res = await salePriceQuery({
      productId: itemObj.value.id,
      revisePrice: priceValue.value,
      description: "手机端操作",
    });
    if (res.code == 200) {
      showToast("修改成功");
      num.value = num.value + 1;
      productData.value[selectitem.value].newsalePrice = priceValue.value;
      // productData.value[selectitem.value].salePrice=priceValue.value

      // getAppProductQuery(1);
      show.value = false;
    } else {
      showToast(res.msg);
    }
  } catch (e) {
    showToast(e.msg);
  }
};
//改价列表
</script>

<template>
  <topNav
    title="商品搜索"
    @save="saveFun"
    @search="searchFun"
    :IsSearch="true"
  ></topNav>
  <view class="goods_form">
    <view
      class="scroll-Y-item"
      v-for="(item, index) in productData"
      :key="index"
    >
      <!-- <view class="scroll-item-left">
        <image
          src="https://lanhu-oss.lanhuapp.com/MasterSlicePNG44906130edf88b23f1e18d2c618a2940.png?noCache=true"
          mode="scaleToFill"
        />
      </view> -->
      <view class="scroll-item-right">
        <view class="goods-item-title"
          ><text class="goods-item-title-top">
            {{ item.productBarCode ? item.productBarCode : "--"
            }}{{ "(" + item.createTime + ")" }}</text
          >
          <text>原价:{{ item.currentPrice }}</text>
        </view>
        <!-- <view class="goods-item-spec"> 产品规格、产品规格 </view> -->
        <view class="goods-item-price">
          <text class="goods-item-title-top">
            {{ item.productName }}
          </text>
          <text class="color-blue"
            >¥{{ item.revisePrice }}{{ item.unit ? "/" + item.unit : "" }}</text
          >
        </view>
        <!-- <view class="goods-item-price">
          <text>
            操作时间: {{ item.productBarCode ? item.productBarCode : "--" }}</text
          >
         
        </view> -->
      </view>
    </view>
  </view>
  <view class="loading-form" v-if="loading && productData.length > 0"
    ><van-loading size="24rpx" v-if="loading == 'Loading'"
      ><text class="loading-text">加载中...</text>
    </van-loading>
    <text class="loading-text" v-if="loading == 'More'">加载更多</text>
    <text class="loading-text" v-if="loading == 'noMore'">~没有数据了~</text>
  </view>
  <!-- <view style="width: 100%; height: 200rpx"></view> -->
  <!-- <view class="goods_bt">
    <view class="goods_bt_to">
      <text>本次调价{{ num }}款</text>
      <van-button class="val-button" type="primary">调价记录</van-button>
    </view>
  </view> -->

  <view class="mask-k" v-if="show" @click="show = false"></view>
  <!--  -->
  <view
    class="select_price"
    :style="'bottom:' + keyboardHeight + 'px;'"
    :class="!show ? 'select_price_noshow' : ''"
  >
    <view class="select_price_tag" @click="show = false">
      <van-icon name="cross" size="28rpx" color="#86909C" />
    </view>
    <view class="select_price_top">
      <view class="select_price_title">{{ itemObj.name }}</view>
      <view class="select_price_des">{{ itemObj.barCode }}</view>
    </view>
    <view class="select_price_in">
      <view class="select_price_title">新售价 </view>
      <view>
        <van-field
          v-model="priceValue"
          readonly
          clickable
          @touchstart.stop="show = true"
          class="select_price_input"
        >
          <template #button>
            <text>元</text>
          </template>
        </van-field>
      </view>
    </view>
  </view>
  <van-config-provider :theme-vars="themeVars">
    <van-number-keyboard
      :transition="true"
      :hide-on-click-outside="false"
      ref="keyboard"
      class="priceKey"
      v-model="priceValue"
      :show="show"
      theme="custom"
      extra-key="."
      close-button-text="完成"
      @blur="onBlue"
      @input="onInput"
      @delete="onDelete"
      z-index="50"
    />
  </van-config-provider>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
